<template>
  <view class="follow-video">
    <view class="uerInfo">
      <view class="author">
        <image :src="videoItem.data.creator.avatarUrl" mode=""></image>
        <text>{{ videoItem.data.creator.nickname }}</text>
      </view>
      <text class="iconfont icon-gengduo2"></text>
    </view>
    <text class="title">{{ videoItem.data.title }}</text>
    <video
      :src="videoItem.data.urlInfo.url"
      :controls="false"
      v-if="isVideoShow"
      :id="videoItem.data.vid"
      autoplay
      loop
    >
      <cover-view class="iconfont icon-bofang1" v-show="isPlay" @click="videoPlay(0)"></cover-view>
      <cover-view class="iconfont icon-pause" v-show="!isPlay" @click="videoPlay(1)"></cover-view>
    </video>
    <image
      :src="videoItem.data.coverUrl"
      mode=""
      v-else
      @click="changeVideo"
      @load="imgLoad"
    ></image>
    <!-- 转发相关 -->
    <view class="videoTransmit">
      <view class="time">{{ Math.abs(videoItem.data.creator.birthday * 10) | formateTime }}</view>
      <view class="share">
        <view class="icon">
          <text class="iconfont icon-fenxiang"></text>
          <text>分享</text>
        </view>
        <view class="icon">
          <text class="iconfont icon-pinglun3"></text>
          <text>评论</text>
        </view>
        <view class="icon">
          <text class="iconfont icon-aixin2"></text>
          <text>赞</text>
        </view>
      </view>
    </view>
    <!-- 评论相关 -->
    <view class="comment">
      <view class="comments">4人赞过</view>
      <view class="import">
        <text class="iconfont icon-pen1"></text>
        <input type="text" value="" placeholder="请添加评论..." />
      </view>
    </view>
    <view class="animate" v-show="isVideoShow">
      <view class="content">
        <text class="iconfont icon-douyin"></text>
        <text>{{ videoItem.data.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { debounce } from '../../../common/utils.js'
export default {
  name: 'FollowVideo',
  props: {
    videoItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isVideoShow: false,
      currentVideo: {},
      isPlay: false
    }
  },
  methods: {
    changeVideo() {
      if (Object.keys(getApp().globalData.globalVideoPlay).length) {
        getApp().globalData.globalVideoPlay.pause()
      }
      this.isVideoShow = true
      getApp().globalData.globalVideoPlay = this.currentVideo
    },
    imgLoad: debounce('imgLoadFinish'),
    imgLoadFinish() {
      this.$bus.$emit('imgLoadFinish')
    },
    videoPlay(type) {
      if (type) {
        this.isPlay = true
        this.currentVideo.pause()
      } else {
        this.isPlay = false
        this.currentVideo.play()
      }
    }
  },
  mounted() {
    this.currentVideo = uni.createVideoContext(this.videoItem.data.vid, this)
  }
}
</script>

<style lang="scss" scoped>
.follow-video {
  padding: 20rpx;
  font-size: 28rpx;
  position: relative;
  color: #eee;
  .uerInfo {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    .author {
      display: flex;
      align-items: center;
      image {
        height: 80rpx;
        width: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }
  .title {
    display: block;
    height: auto;
    width: 530rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  video {
    height: 900rpx;
    border-radius: 20rpx;
    width: 600rpx;
    position: relative;
  }
  image {
    height: 900rpx;
    width: 600rpx;
  }
  .videoTransmit {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .share {
      display: flex;
      .icon {
        margin-right: 20rpx;
      }
      .iconfont {
        font-size: 36rpx;
        margin-right: 10rpx;
        text {
          font-size: 28rpx;
        }
      }
    }
  }
  .comment {
    height: 150rpx;
    background: #1e1f2e;
    display: flex;
    flex-direction: column;
    .comments {
      flex: 1;
      line-height: 75rpx;
      padding: 0 20rpx;
    }
    .import {
      display: flex;
      flex: 1;
      align-items: center;
      .icon-pen1 {
        margin-right: 10rpx;
      }
    }
  }
}
.animate {
  width: 400rpx;
  position: absolute;
  bottom: 310rpx;
  left: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  .content {
    width: 600rpx;
    animation: move 4s linear infinite;
  }
}
.icon-bofang1,
.icon-pause {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
}
@keyframes move {
  0% {
    transform: translateX(40%);
  }

  100% {
    transform: translateX(-80%);
  }
}
.icon-douyin {
  margin-right: 20rpx;
  color: purple;
  border-radius: 50%;
  border: 1rpx solid purple;
}
</style>
